You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
647 lines
13 KiB
647 lines
13 KiB
<script setup lang="ts">
|
|
import { request } from '~/utils/http/factory'
|
|
|
|
definePageMeta({ layout: 'home' })
|
|
|
|
const { $toast } = useNuxtApp()
|
|
const { loggedIn } = useAuthSession()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
interface AgentDocumentDetail {
|
|
id: number
|
|
title: string
|
|
content: string
|
|
type: 'memory' | 'document'
|
|
summary: string | null
|
|
tags: string[]
|
|
sessionId: string | null
|
|
agentId: number | null
|
|
createdAt: string
|
|
updatedAt: string
|
|
}
|
|
|
|
interface AgentItem {
|
|
id: number
|
|
name: string
|
|
slug: string
|
|
}
|
|
|
|
const doc = ref<AgentDocumentDetail | null>(null)
|
|
const loading = ref(true)
|
|
const notFound = ref(false)
|
|
|
|
const editVisible = ref(false)
|
|
const editData = reactive({
|
|
title: '',
|
|
content: '',
|
|
tags: [] as string[],
|
|
})
|
|
const editSaving = ref(false)
|
|
const tagInput = ref('')
|
|
|
|
const confirmShow = ref(false)
|
|
|
|
const agents = ref<AgentItem[]>([])
|
|
const scopeSaving = ref(false)
|
|
|
|
async function fetchAgents() {
|
|
try {
|
|
const raw = await request<{ code: number; data: { list: AgentItem[] } }>('/api/agents')
|
|
agents.value = raw.data.list
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
async function changeScope(agentSlug: string | null) {
|
|
scopeSaving.value = true
|
|
try {
|
|
await request(`/api/agent-documents/${route.params.id}`, {
|
|
method: 'PATCH',
|
|
body: { agentSlug },
|
|
})
|
|
$toast.success(agentSlug ? '已绑定到当前 Agent' : '已改为全局共享')
|
|
await fetchDocument()
|
|
} catch (e: any) {
|
|
$toast.error(e?.data?.message || e?.message || '修改失败')
|
|
} finally {
|
|
scopeSaving.value = false
|
|
}
|
|
}
|
|
|
|
function onScopeSelect(value: string) {
|
|
if (!value) {
|
|
changeScope(null)
|
|
return
|
|
}
|
|
const agent = agents.value.find((a) => String(a.id) === value)
|
|
changeScope(agent?.slug ?? null)
|
|
}
|
|
|
|
async function fetchDocument() {
|
|
loading.value = true
|
|
try {
|
|
const id = route.params.id
|
|
const raw = await request<{ code: number; data: AgentDocumentDetail }>(
|
|
`/api/agent-documents/${id}`,
|
|
)
|
|
doc.value = raw.data
|
|
} catch (e: any) {
|
|
if (e?.statusCode === 404 || e?.data?.code === 404) {
|
|
notFound.value = true
|
|
} else {
|
|
$toast.error('加载失败')
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function openEdit() {
|
|
if (!doc.value) return
|
|
editData.title = doc.value.title
|
|
editData.content = doc.value.content
|
|
editData.tags = [...doc.value.tags]
|
|
tagInput.value = ''
|
|
editVisible.value = true
|
|
}
|
|
|
|
function addTag() {
|
|
const t = tagInput.value.trim()
|
|
if (t && !editData.tags.includes(t)) {
|
|
editData.tags.push(t)
|
|
}
|
|
tagInput.value = ''
|
|
}
|
|
|
|
function removeTag(idx: number) {
|
|
editData.tags.splice(idx, 1)
|
|
}
|
|
|
|
async function handleSave() {
|
|
if (!editData.title.trim()) {
|
|
$toast.warning('请输入标题')
|
|
return
|
|
}
|
|
if (!editData.content.trim()) {
|
|
$toast.warning('请输入内容')
|
|
return
|
|
}
|
|
|
|
editSaving.value = true
|
|
try {
|
|
await request(`/api/agent-documents/${route.params.id}`, {
|
|
method: 'PATCH',
|
|
body: {
|
|
title: editData.title.trim(),
|
|
content: editData.content,
|
|
tags: editData.tags,
|
|
},
|
|
})
|
|
$toast.success('已更新')
|
|
editVisible.value = false
|
|
await fetchDocument()
|
|
} catch (e: any) {
|
|
$toast.error(e?.data?.message || e?.message || '保存失败')
|
|
} finally {
|
|
editSaving.value = false
|
|
}
|
|
}
|
|
|
|
async function handleDelete() {
|
|
try {
|
|
await request(`/api/agent-documents/${route.params.id}`, { method: 'DELETE' })
|
|
$toast.success('已删除')
|
|
router.push('/agent-documents')
|
|
} catch (e: any) {
|
|
$toast.error(e?.data?.message || e?.message || '删除失败')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchDocument()
|
|
fetchAgents()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="doc-detail-page">
|
|
<div v-if="loading" class="loading-state">
|
|
<p class="loading-text">加载中…</p>
|
|
</div>
|
|
|
|
<div v-else-if="notFound" class="empty-state">
|
|
<p class="empty-text">文档不存在或无权访问</p>
|
|
<NuxtLink to="/agent-documents" class="back-link">返回列表</NuxtLink>
|
|
</div>
|
|
|
|
<template v-else-if="doc">
|
|
<div class="detail-header">
|
|
<NuxtLink to="/agent-documents" class="back-link">← 返回列表</NuxtLink>
|
|
<div v-if="loggedIn" class="header-actions">
|
|
<button class="action-btn" @click="openEdit">编辑</button>
|
|
<button class="action-btn danger" @click="confirmShow = true">删除</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-meta">
|
|
<span class="type-badge" :class="doc.type">
|
|
{{ doc.type === 'document' ? '文档' : '记忆' }}
|
|
</span>
|
|
<span class="meta-date">
|
|
创建于 {{ new Date(doc.createdAt).toLocaleString('zh-CN') }}
|
|
</span>
|
|
<span class="meta-date">
|
|
更新于 {{ new Date(doc.updatedAt).toLocaleString('zh-CN') }}
|
|
</span>
|
|
<span v-if="doc.tags.length > 0" class="meta-tags">
|
|
<span v-for="tag in doc.tags" :key="tag" class="tag-chip">{{ tag }}</span>
|
|
</span>
|
|
<span class="scope-control">
|
|
<span class="scope-label">归属:</span>
|
|
<select
|
|
class="scope-select"
|
|
:disabled="scopeSaving"
|
|
:value="doc.agentId ?? ''"
|
|
@change="onScopeSelect(($event.target as HTMLSelectElement).value)"
|
|
>
|
|
<option value="">全局共享</option>
|
|
<option v-for="a in agents" :key="a.id" :value="a.id">{{ a.name }}</option>
|
|
</select>
|
|
</span>
|
|
</div>
|
|
|
|
<h1 class="detail-title">{{ doc.title }}</h1>
|
|
|
|
<p v-if="doc.summary" class="detail-summary">{{ doc.summary }}</p>
|
|
|
|
<div class="detail-content">
|
|
<AgentMarkdown :text="doc.content" />
|
|
</div>
|
|
</template>
|
|
|
|
<BoDialog v-model:show="editVisible">
|
|
<div class="form-dialog">
|
|
<h3 class="form-title">编辑文档</h3>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">标题</label>
|
|
<input
|
|
v-model="editData.title"
|
|
type="text"
|
|
class="form-input"
|
|
placeholder="输入标题"
|
|
maxlength="255"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">内容 (Markdown)</label>
|
|
<textarea
|
|
v-model="editData.content"
|
|
class="form-textarea"
|
|
placeholder="输入内容…"
|
|
rows="16"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">标签</label>
|
|
<div class="tag-editor">
|
|
<span v-for="(t, i) in editData.tags" :key="t" class="tag-chip removable">
|
|
{{ t }}
|
|
<button class="tag-remove" @click="removeTag(i)">×</button>
|
|
</span>
|
|
<input
|
|
v-model="tagInput"
|
|
type="text"
|
|
class="tag-input"
|
|
placeholder="输入标签后回车"
|
|
@keydown.enter.prevent="addTag"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button class="btn-cancel" @click="editVisible = false">取消</button>
|
|
<button
|
|
class="btn-save"
|
|
:disabled="editSaving"
|
|
@click="handleSave"
|
|
>
|
|
{{ editSaving ? '保存中…' : '保存' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</BoDialog>
|
|
|
|
<BoDialog v-model:show="confirmShow">
|
|
<div class="confirm-dialog">
|
|
<p class="confirm-msg">确定删除「{{ doc?.title }}」吗？此操作不可撤销。</p>
|
|
<div class="confirm-actions">
|
|
<button class="btn-cancel" @click="confirmShow = false">取消</button>
|
|
<button class="btn-save danger" @click="handleDelete">确认删除</button>
|
|
</div>
|
|
</div>
|
|
</BoDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.doc-detail-page {
|
|
padding: 32px 0 64px;
|
|
flex: 1;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.loading-state,
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 80px 0;
|
|
gap: 12px;
|
|
}
|
|
|
|
.loading-text,
|
|
.empty-text {
|
|
font-size: 15px;
|
|
color: #6c6a64;
|
|
}
|
|
|
|
.back-link {
|
|
font-size: 14px;
|
|
color: #cc785c;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.back-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 4px 12px;
|
|
border: 1px solid #e6dfd8;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
font-size: 12px;
|
|
color: #6c6a64;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
border-color: #cc785c;
|
|
color: #cc785c;
|
|
}
|
|
|
|
.action-btn.danger:hover {
|
|
border-color: #c64545;
|
|
color: #c64545;
|
|
}
|
|
|
|
.detail-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.type-badge {
|
|
font-size: 11px;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.type-badge.document {
|
|
background: #d4edda;
|
|
color: #2d6a4f;
|
|
}
|
|
|
|
.type-badge.memory {
|
|
background: #d1e4f0;
|
|
color: #1a5276;
|
|
}
|
|
|
|
.meta-date {
|
|
font-size: 12px;
|
|
color: #b8b2a6;
|
|
}
|
|
|
|
.meta-tags {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.scope-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.scope-label {
|
|
font-size: 12px;
|
|
color: #6c6a64;
|
|
}
|
|
|
|
.scope-select {
|
|
font-size: 12px;
|
|
padding: 2px 6px;
|
|
border: 1px solid #e6dfd8;
|
|
border-radius: 6px;
|
|
background: #faf9f5;
|
|
color: #3d3d3a;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.scope-select:focus {
|
|
border-color: #cc785c;
|
|
}
|
|
|
|
.scope-select:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.tag-chip {
|
|
font-size: 11px;
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
background: #efe9de;
|
|
color: #8b7e6a;
|
|
}
|
|
|
|
.detail-title {
|
|
font-family: var(--font-serif, 'Noto Serif SC', serif);
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
color: #141413;
|
|
margin: 0 0 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.detail-summary {
|
|
font-size: 15px;
|
|
color: #6c6a64;
|
|
line-height: 1.6;
|
|
margin: 0 0 24px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #efe9de;
|
|
}
|
|
|
|
.detail-content {
|
|
font-size: 15px;
|
|
line-height: 1.8;
|
|
color: #3d3d3a;
|
|
}
|
|
|
|
.form-dialog {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 28px;
|
|
min-width: 640px;
|
|
max-width: 800px;
|
|
max-height: 85vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.form-title {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: #141413;
|
|
margin: 0 0 24px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #6c6a64;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 9px 14px;
|
|
border: 1px solid #e6dfd8;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
color: #3d3d3a;
|
|
outline: none;
|
|
background: #faf9f5;
|
|
transition: border-color 0.2s;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: #cc785c;
|
|
}
|
|
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: 9px 14px;
|
|
border: 1px solid #e6dfd8;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
color: #3d3d3a;
|
|
outline: none;
|
|
background: #faf9f5;
|
|
resize: vertical;
|
|
font-family: monospace;
|
|
transition: border-color 0.2s;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-textarea:focus {
|
|
border-color: #cc785c;
|
|
}
|
|
|
|
.tag-editor {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
padding: 6px 8px;
|
|
border: 1px solid #e6dfd8;
|
|
border-radius: 8px;
|
|
background: #faf9f5;
|
|
min-height: 38px;
|
|
}
|
|
|
|
.tag-chip.removable {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 4px 2px 8px;
|
|
}
|
|
|
|
.tag-remove {
|
|
border: none;
|
|
background: none;
|
|
color: #8b7e6a;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
.tag-remove:hover {
|
|
color: #c64545;
|
|
}
|
|
|
|
.tag-input {
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
font-size: 13px;
|
|
color: #3d3d3a;
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
margin-top: 28px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #efe9de;
|
|
}
|
|
|
|
.btn-cancel {
|
|
padding: 8px 20px;
|
|
border: 1px solid #e6dfd8;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
font-size: 14px;
|
|
color: #6c6a64;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background: #f5f0e8;
|
|
}
|
|
|
|
.btn-save {
|
|
padding: 8px 20px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: #cc785c;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.btn-save:hover {
|
|
background: #a9583e;
|
|
}
|
|
|
|
.btn-save:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-save.danger {
|
|
background: #c64545;
|
|
}
|
|
|
|
.btn-save.danger:hover {
|
|
background: #a33;
|
|
}
|
|
|
|
.confirm-dialog {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
min-width: 320px;
|
|
}
|
|
|
|
.confirm-msg {
|
|
font-size: 15px;
|
|
color: #3d3d3a;
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.confirm-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.doc-detail-page {
|
|
padding: 20px 16px 48px;
|
|
}
|
|
|
|
.form-dialog {
|
|
min-width: auto;
|
|
max-width: 100%;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
|